<template>
  <div class="profile">
    <header class="header">
      <h1>我的</h1>
    </header>
    <div class="content">
      <div class="user-info">
        <div class="avatar-wrapper" @click="triggerFileInput">
          <img :src="store.currentUser.avatar" :alt="store.currentUser.name" class="avatar">
          <div class="avatar-mask">
            <i class="iconfont icon-camera"></i>
            <span>更换头像</span>
          </div>
        </div>
        <div class="info">
          <div class="name">{{ store.currentUser.name }}</div>
          <div class="id">ID: {{ store.currentUser.id }}</div>
        </div>
      </div>
      <div class="menu-list">
        <div class="menu-item" @click="triggerFileInput">
          <i class="iconfont icon-camera"></i>
          <span>更换头像</span>
        </div>
        <div class="menu-item" @click="changeName">
          <i class="iconfont icon-edit"></i>
          <span>修改昵称</span>
        </div>
        <div class="menu-item" @click="exportChat">
          <i class="iconfont icon-download"></i>
          <span>导出聊天记录</span>
        </div>
      </div>
    </div>
    <!-- 隐藏的文件输入框 -->
    <input
      type="file"
      ref="fileInput"
      accept="image/*"
      style="display: none"
      @change="onFileSelected"
    >
    <!-- 添加裁剪组件 -->
    <image-cropper
      v-model:visible="showCropper"
      :image-url="tempImageUrl"
      :max-size="5120"
      output-type="png"
      @confirm="onCropConfirm"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useChatStore } from '@/stores/chat'
import { DEFAULT_AVATAR } from '@/constants/default'
import ImageCropper from '@/components/ImageCropper.vue'
import { exportToExcel } from '@/utils/export'

const store = useChatStore()
const fileInput = ref<HTMLInputElement | null>(null)
const showCropper = ref(false)
const tempImageUrl = ref('')

// 触发文件选择
const triggerFileInput = () => {
  fileInput.value?.click()
}

// 处理文件选择
const onFileSelected = (event: Event) => {
  const input = event.target as HTMLInputElement
  const file = input.files?.[0]
  
  if (file) {
    // 验证文件类型
    if (!file.type.includes('image/')) {
      alert('请选择图片文件')
      return
    }

    // 验证文件大小（5MB）
    if (file.size > 5 * 1024 * 1024) {
      alert('图片大小不能超过5MB')
      return
    }

    const reader = new FileReader()
    reader.onload = (e) => {
      const result = e.target?.result
      if (typeof result === 'string') {
        tempImageUrl.value = result
        showCropper.value = true
      }
    }
    reader.onerror = () => {
      alert('读取文件失败')
    }
    reader.readAsDataURL(file)
  }
  
  // 清除选择，以便可以选择相同的文件
  input.value = ''
}

// 处理裁剪确认
const onCropConfirm = (base64: string) => {
  store.updateUserAvatar(base64)
}

const changeName = () => {
  // TODO: 实现修改昵称功能
}

// 导出聊天记录
const exportChat = async () => {
  try {
    await exportToExcel(store.messages)
  } catch (error) {
    console.error('导出失败:', error)
    alert('导出失败，请稍后重试')
  }
}
</script>

<style scoped>
.profile {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.header {
  padding: 16px;
  background: #fff;
  border-bottom: 1px solid #eee;
}

.header h1 {
  margin: 0;
  font-size: 18px;
  text-align: center;
}

.content {
  flex: 1;
  overflow: auto;
  padding: 16px;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 24px;
  background: #fff;
  border-radius: 12px;
  margin-bottom: 24px;
}

.avatar-wrapper {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 40px;
  margin-right: 16px;
  overflow: hidden;
  cursor: pointer;
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  opacity: 0;
  transition: opacity 0.3s;
}

.avatar-wrapper:hover .avatar-mask {
  opacity: 1;
}

.avatar-mask i {
  font-size: 24px;
  margin-bottom: 4px;
}

.avatar-mask span {
  font-size: 12px;
}

.info .name {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 8px;
}

.info .id {
  font-size: 14px;
  color: #666;
}

.menu-list {
  background: #fff;
  border-radius: 12px;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item i {
  font-size: 20px;
  margin-right: 12px;
  color: #007bff;
  transition: transform 0.2s;
}

.menu-item:hover i {
  transform: scale(1.1);
}

.menu-item span {
  font-size: 16px;
}

.menu-item:hover {
  background: #f5f7fe;
}

/* 添加下载按钮样式 */
.menu-item .icon-download {
  color: #28a745;
}

/* 添加导出时的加载状态 */
.menu-item.exporting {
  opacity: 0.7;
  cursor: not-allowed;
}

.menu-item.exporting i {
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style> 